<template>
	<card-block title="个人信息">
		<template slot="button">
			<router-link to="/usercenter/personal">管理</router-link>
		</template>
		<template slot="content">
			<div class="index_user_info">
				<dl class="user">
					<dt><el-avatar :size="64" :src="defaultAvarta"></el-avatar></dt>
					<dd>
						<h4>{{ userInfoData.username }}</h4>
						<p>{{ userInfoData.deptName || '待岗' }}</p>
					</dd>
				</dl>
				<div class="data">
					<dl>
						<dt>我的收藏</dt>
						<dd>{{ userInfoData.myCollect || 0 }}</dd>
					</dl>
					<dl>
						<dt>我的分享</dt>
						<dd>{{ userInfoData.myShare || 0 }}</dd>
					</dl>
				</div>
			</div>
		</template>
	</card-block>
</template>

<script>
import { mapGetters } from 'vuex';
import cardBlock from './cardBlock';
export default {
	components: { cardBlock },
	props: {
		data: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			defaultAvarta: ''
		};
	},
	computed: {
		...mapGetters(['siteInfo', 'userInfo']),
		userInfoData() {
			return { ...this.userInfo, myCollect: this.data.myCollect, myShare: this.data.myShare };
		}
	},
	watch: {
		async userInfoData(data) {
			if (!!data.picId && data.picId !== '-1') {
				this.defaultAvarta = window.staticPath + data.picPath;
			} else if (!!this.siteInfo.userPic) {
				this.defaultAvarta = window.staticPath + this.userPicPath;
			} else {
				this.defaultAvarta = require('@/assets/img/avatar_image.png');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.index_user_info {
	padding: 0 16px;

	dl.user {
		display: flex;
		align-items: center;
		padding: 8px 0 16px;
		border-bottom: solid 1px #ebeef5;

		dd {
			margin-left: 10px;
			line-height: 24px;
		}

		p {
			color: #909399;
		}
	}

	.data {
		display: flex;

		dl {
			flex: 1;
			padding: 10px 0;
			line-height: 24px;
		}

		dt {
			color: #909399;
		}

		dd {
			color: var(--primary);
			font-size: 16px;
			font-weight: bold;
		}
	}
}
</style>
